<template>
	<view class="contianner">
		<view class="forms">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" left-icon="man-add" label-width="200rpx" prop="stuname">
					<u-input v-model="form.stuname" placeholder="请输入姓名,用于联系" />
				</u-form-item>
				<u-form-item label="联系方式" left-icon="phone" label-width="200rpx" prop="stuphone">
					<u-input v-model="form.stuphone" placeholder="请输入电话号码,用于联系" />
				</u-form-item>
				<u-form-item label="咨询时间" left-icon="clock" prop="time" label-width="200rpx">
					<u-input v-model="form.time" placeholder="请选择预约时间,可多选" type="select" @click="show = true" />
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback">
					</u-action-sheet>
				</u-form-item>
				<u-form-item label="预约教师" left-icon="server-man" label-width="200rpx">
					<u-input v-model="form.tecname" disabled="true" />
				</u-form-item>
				<u-form-item label="备注" left-icon="edit-pen" label-width="200rpx" prop="edit">
					<u-input v-model="form.edit" placeholder="选填,若有情况需想教师说明情况填此项" type="textarea" :auto-height="true" />
				</u-form-item>
			</u-form>
			<u-button @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					stuname: '',
					stuphone: '',
					time: '',
					tecname: '',
					edit: ''
				},
				show: false,
				teacher_info: {},
				rules: {
					stuname: [{
						required: true,
						message: '还未输入姓名',
						trigger: ['blur'],
					}],
					stuphone: [{
						min: 11,
						required: true,
						message: '还未输入电话号码',
						trigger: ['blur'],
					}],
					time: [{
						required: true,
						message: '还未选择咨询时间',
						trigger: ['blur']
					}],
					edit: [{ required: false, }],
				},
				actionSheetList: [{
					text: '9: 00 - 10.30',
					flag: false
				}, {
					text: '14: 00 - 15: 00',
					flag: false
				}]
			}
		},
		methods: {
			actionSheetCallback(index) {
				if (this.actionSheetList[index].flag == false) {
					this.form.time += (this.actionSheetList[index].text + ',')
					this.actionSheetList[index].flag == true
				}

			},
			submit() {
				if (this.$rules(this.form, this.rules)) {
					uni.showLoading({ title: '提交中...' })
				}
			}
	},
	onLoad(option) {
		console.log(option.id)
			uni.getStorage({
				key: 'teacher',
				success: res => {
					this.teacher_info = res.data
					this.form.tecname = this.teacher_info.name
				}
			})
		},
		onBackPress() {
			uni.removeStorage({
				key: 'teacher',
				success: res => {
					console.log('')
				}
			})
		},
	}
</script>

<style lang="less">
	.contianner {
		width: 750rpx;
		height: 100vh;
		background-image: linear-gradient(to bottom, #7A88FF, #7AFFAF);
		display: flex;
		justify-content: center;
		align-content: space-between;

		.forms {
			width: 90%;
			display: flex;
			align-content: space-between;
			flex-direction: column;
		}
	}
</style>
